<template>
  <div>
    <div style="margin-bottom: 8px; display: flex; align-items: center;">
      <el-button type="danger" size="mini" @click="handleBatchCancel">发货单作废</el-button>
    </div>
    <vxe-table
      border
      stripe
      size="small"
      header-align="center"
      :data="shippingTableData"
      ref="shippingTable"
      scroll-x="auto"
      @checkbox-change="onCheckboxChange"
      @checkbox-all="onCheckboxAll"
    >
      <vxe-column type="checkbox" width="50" fixed="left"></vxe-column>
      <vxe-column type="seq" title="序号" width="60" fixed="left"></vxe-column>
      <vxe-column field="shipmentCode" title="发货单号" width="140" fixed="left" align="center"></vxe-column>
      <vxe-column field="platformDeliveryStatus" title="发货状态" width="100" align="center"></vxe-column>
      <vxe-column field="trackingNumber" title="物流单号？" width="140" align="center"></vxe-column>
      <vxe-column field="expressBillPrinter" title="打印物流单" width="100" align="center"> </vxe-column>
      <vxe-column field="shipmentBillPrinter" title="打印发货单" width="100" align="center"> </vxe-column>
      <vxe-column field="trackingNumber" title="扫描？" width="80" align="center"> </vxe-column>
      <vxe-column field="expressCompany" title="物流公司" width="120" align="center"></vxe-column>
      <vxe-column field="actualDeliveryTime" title="发货时间" width="140" align="center"></vxe-column>
      <vxe-column field="itemCode" title="商品编码？" width="120" align="center"></vxe-column>
      <vxe-column field="itemName" title="商品名称？" width="140" align="center"></vxe-column>
      <vxe-column field="specInfo" title="规格信息？" width="120" align="center"></vxe-column>
      <vxe-column field="shippingQty" title="发货数量？" width="100" align="center"></vxe-column>
      <vxe-column field="cancelled" title="发货单作废状态" width="120" align="center">
        <template #default="{ row }">{{ row.cancelled ? '是' : '否' }}</template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import { listShipment, cancelShipment } from '@/api/mes/sales/prepare';
export default {
  name: "ShippingInfo",
  props: {
    deliveryOrderId: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      shippingTableData: [],
      selectedIds: []
    };
  },
  watch: {
    deliveryOrderId: {
      handler(newVal) {
        if (newVal && newVal !== null) {
          this.getShippingList();
        } else {
          this.shippingTableData = [];
        }
      },
      immediate: true
    }
  },
  methods: {
    onCheckboxChange({ records }) {
      this.selectedIds = records.map(row => row.id);
    },
    onCheckboxAll({ records }) {
      this.selectedIds = records.map(row => row.id);
    },
    handleBatchCancel() {
      if (!this.selectedIds || this.selectedIds.length === 0) {
        this.$message.error('请选择要作废的发货单');
        return;
      }
      this.$confirm('确定要作废选中的发货单吗？', '提示', { type: 'warning' })
        .then(() => {
          cancelShipment({ shipmentIds: this.selectedIds })
            .then(() => {
              this.$message.success('操作成功');
              this.getShippingList();
            })
        });
    },
    getShippingList() {
      listShipment(this.deliveryOrderId).then(response => {
        this.shippingTableData = response.data;
      });
    }
  },
};
</script>
